

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/layuikn/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/layuikn/style/admin.css" media="all">
</head>

<style>
    #option_pnzj .layui-form-checkbox, #option_enzj .layui-form-checkbox{
        margin-bottom: 10px;
    }
    .layui-form-radio{
        margin: 0;
    }
    .layui-form-label{
        width: 100px;
    }
    .layui-input:disabled{
        background: rgb(248,248,248);
    }
    form .layui-row{
        margin-bottom: 10px;
    }
</style>

<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header"><h2>临床结局</h2></div>
        <div class="layui-card-body" style="padding: 15px;">
            <fieldset class="layui-elem-field" style="padding: 20px;">
                <legend style="font-size: 15px;">个人信息</legend>
                <div class="layui-row">
                    <div class="layui-col-md4">住院号：<span id="huanzhe_hospital_id"></span></div>
                    <div class="layui-col-md4">姓名：<span id="huanzhe_name"></span></div>
                    <div class="layui-col-md4">性别：<span id="huanzhe_gender"></span></div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">科室：<span id="huanzhe_keshi"></span></div>
                    <div class="layui-col-md4">年龄：<span id="huanzhe_age"></span></div>
                    <div class="layui-col-md4">录入日期：<span id="huanzhe_created"></span></div>
                </div>
            </fieldset>
            <form class="layui-form" action="" lay-filter="lcjj-form">
                <fieldset class="layui-elem-field" style="padding: 20px;">
                    <legend style="font-size: 15px;">临床结局</legend>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-col-md3">1. 入院30天结局</div>
                            <div class="layui-col-md9">
                                <input type="radio" name="jieju_30" lay-filter="jieju_30" title="死亡   无需后续随访" value="1">
                                <input type="radio" name="jieju_30" lay-filter="jieju_30" title="存活   需后续随访" value="2">
                                <input type="radio" name="jieju_30" lay-filter="jieju_30" title="失访" value="3">
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-col-md3">2. 总住院时间</div>
                            <div class="layui-col-md9">
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="padding-left: 0;width: 100px;">2.1 总住院时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="zzysj" placeholder="" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">天</div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="padding-left: 0;width: 100px;">2.2 住ICU时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="icusj" placeholder="" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">天(该时间不能大于总住院时间)</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-col-md3">3. 费用: 住院总费用</div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="text" name="zyzfy" placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">元(保留小数点后一位)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-col-md3">4. 本次入院后30天体重</div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="text" name="tizhong_30" placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">kg(保留小数点后一位)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-row">
                                <input hidden value="" type="text" name="yyzc" disabled>
                                <div class="layui-col-md3">5. 营养支持（可多选）</div>
                                <div class="layui-col-md9">
                                    <input type="checkbox" name="option_yyzc" lay-filter="yyzc" value="1" title="肠外营养">
                                    <input type="checkbox" name="option_yyzc" lay-filter="yyzc" value="2" title="肠内营养">
                                    <input type="checkbox" name="option_yyzc" lay-filter="yyzc" value="3" title="无营养支持">
                                </div>
                            </div>
                            <div class="layui-row">
                                <input hidden value="" type="text" name="pnfs" disabled>
                                <div class="layui-col-md3" style="padding-left: 20px;">PN方式</div>
                                <div class="layui-col-md9" id="option_pnfs">
                                    <input type="checkbox" name="option_pnfs" value="1" title="工业三腔袋">
                                    <input type="checkbox" name="option_pnfs" value="2" title="工业双腔袋">
                                    <input type="checkbox" name="option_pnfs" value="3" title="自配三升袋">
                                </div>
                            </div>
                            <div class="layui-row">
                                <input hidden value="" type="text" name="pnzj" disabled>
                                <div class="layui-col-md3" style="padding-left: 20px;">PN制剂</div>
                                <div class="layui-col-md9" id="option_pnzj">

                                </div>
                            </div>
                            <div class="layui-row">
                                <input hidden value="" type="text" name="enfs" disabled>
                                <div class="layui-col-md3" style="padding-left: 20px;">EN方式</div>
                                <div class="layui-col-md9" id="option_enfs">

                                </div>
                            </div>
                            <div class="layui-row">
                                <input hidden value="" type="text" name="enzj" disabled>
                                <div class="layui-col-md3" style="padding-left: 20px;">EN制剂</div>
                                <div class="layui-col-md9" id="option_enzj">

                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md3" style="padding-left: 20px;">营养支持量</div>
                                <div class="layui-col-md9">
                                    <input type="radio" name="yyzcl" value="1" title="部分补充">
                                    <input type="radio" name="yyzcl" value="2" title="完全代替食物">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field" style="padding: 20px;">
                    <legend style="font-size: 15px;">调查者自查</legend>
                    <div class="layui-row">
                        <div class="layui-inline" style="margin-right: 20px;">
                            详细检查上述所有调查内容是否都完成
                        </div>
                        <div class="layui-inline">
                           <input type="radio" name="xxjcwc" value="1" title="完成（进行数据录入）">
                           <input type="radio" name="xxjcwc" value="0" title="未完成（需继续调查）">
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">调查者签名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="dc_name" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">复核人签名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="fh_name" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">调查者手机号码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="dc_mobile" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">复核人手机号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="fh_mobile" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">调查日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="dc_date" id="dc_date" readonly autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn" lay-submit="" lay-filter="last">上一步</button>
                            <button class="layui-btn" lay-submit="" lay-filter="next">保存</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>


<script src="__STATIC__/layuikn/layui/layui.js"></script>
<script>
    layui.config({
        base: '__STATIC__/layuikn/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
        ,ajaxData:'../extends/ajaxData'
        ,getOption:'../extends/getOption'
    }).use(['index', 'jquery', 'ajaxData', 'getOption', 'form', 'laydate'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,ajaxData = layui.ajaxData
            ,getOption = layui.getOption
            ,form = layui.form;
        laydate.render({
            elem: '#dc_date' //指定元素
        });
        var pid = sessionStorage.getItem('pid');
        ajaxData.ajaxData('GET',"{:url('patient/info')}?pid=" + pid,{},function (back) {
            if(back.data){
                $('#huanzhe_hospital_id').html(back.data.hospital_id);
                $('#huanzhe_name').html(back.data.name);
                $('#huanzhe_gender').html(back.data.gender);
                $('#huanzhe_keshi').html(back.data.keshi);
                $('#huanzhe_age').html(back.data.age);
                $('#huanzhe_created').html(back.data.created);
                $('input[name="age"]').val(back.data.age);
            }
        });

        var option_all;


        $.ajax({
            url: "{:url('option/all',[])}",
            type: 'get',
            contentType: 'application/json',
            dataType: 'json',
            async: false, // 同步
            success: function (result) {
                option_all = result;
            }
        });

        var option_pnfs =  getOption.option(option_all, 'PN方式');
        var option_pnzj =  getOption.option(option_all, 'PN制剂');
        var option_enfs =  getOption.option(option_all, 'EN方式');
        var option_enzj =  getOption.option(option_all, 'EN制剂');

        //PN方式
        var option_pnfs_html = '';
        $.each(option_pnfs.children,function (k,v) {
            option_pnfs_html +=
                '<input type="checkbox" name="option_pnfs" lay-filter="pnfs" value="' + v.id + '" title="' + v.name + '">';
        });
        $('#option_pnfs').html(option_pnfs_html);

        //PN制剂
        var option_pnzj_html = '';
        $.each(option_pnzj.children,function (k,v) {
            option_pnzj_html +=
                '<input type="checkbox" name="option_pnzj" lay-filter="pnzj" value="' + v.id + '" title="' + v.name + '">';
        });
        $('#option_pnzj').html(option_pnzj_html);

        //EN方式
        var option_enfs_html = '';
        $.each(option_enfs.children,function (k,v) {
            option_enfs_html +=
                '<input type="checkbox" name="option_enfs" lay-filter="enfs" value="' + v.id + '" title="' + v.name + '">';
        });
        $('#option_enfs').html(option_enfs_html);

        //EN制剂
        var option_enzj_html = '';
        $.each(option_enzj.children,function (k,v) {
            option_enzj_html +=
                '<input type="checkbox" name="option_enzj" lay-filter="enzj" value="' + v.id + '" title="' + v.name + '">';
        });
        $('#option_enzj').html(option_enzj_html);

        form.render();
        ajaxData.ajaxData('GET',"{:url('lcjj/info')}?pid=" + pid,{},function (back) {

            if(back.data){
                //给表单赋值
                form.val("lcjj-form", back.data);
                initpnfsValue();
                initpnzjValue();
                initenfsValue();
                initenzjValue();
                inityyzcValue();
            }
            //form.render();
        });

        //监听复选框
        form.on('checkbox(yyzc)', function (data) {
            var number = $('input[name="yyzc"]'), value = data.value, array = number.val().split(",");
            if (data.elem.checked) {

                number.val(number.val() + value + ",");
            } else {
                var newnumber = "";
                for (var i = 0; i < array.length; i++) {
                    var str = array[i];
                    newnumber += (str != value && str != "" && str != null) ? str + "," : "";
                }
                number.val(newnumber);
            }
        });

        form.on('checkbox(pnfs)', function (data) {
            var number = $('input[name="pnfs"]'), value = data.value, array = number.val().split(",");
            if (data.elem.checked) {

                number.val(number.val() + value + ",");
            } else {
                var newnumber = "";
                for (var i = 0; i < array.length; i++) {
                    var str = array[i];
                    newnumber += (str != value && str != "" && str != null) ? str + "," : "";
                }
                number.val(newnumber);
            }
        });

        form.on('checkbox(pnzj)', function (data) {
            var number = $('input[name="pnzj"]'), value = data.value, array = number.val().split(",");
            if (data.elem.checked) {

                number.val(number.val() + value + ",");
            } else {
                var newnumber = "";
                for (var i = 0; i < array.length; i++) {
                    var str = array[i];
                    newnumber += (str != value && str != "" && str != null) ? str + "," : "";
                }
                number.val(newnumber);
            }
        });

        form.on('checkbox(enfs)', function (data) {
            var number = $('input[name="enfs"]'), value = data.value, array = number.val().split(",");
            if (data.elem.checked) {

                number.val(number.val() + value + ",");
            } else {
                var newnumber = "";
                for (var i = 0; i < array.length; i++) {
                    var str = array[i];
                    newnumber += (str != value && str != "" && str != null) ? str + "," : "";
                }
                number.val(newnumber);
            }
        });

        form.on('checkbox(enzj)', function (data) {
            var number = $('input[name="enzj"]'), value = data.value, array = number.val().split(",");
            if (data.elem.checked) {

                number.val(number.val() + value + ",");
            } else {
                var newnumber = "";
                for (var i = 0; i < array.length; i++) {
                    var str = array[i];
                    newnumber += (str != value && str != "" && str != null) ? str + "," : "";
                }
                number.val(newnumber);
            }
        });

        function inityyzcValue() {
            var param=$("input[name='yyzc']").val(),checkBoxs = $("input[type='checkbox']"), array = param.split(",");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < checkBoxs.length; j++) {
                    var checkbox = $(checkBoxs[j]);
                    if (checkbox.val() == array[i]) {
                        checkbox.attr('checked','checked');
                        break;
                    }
                }
            }
            form.render('checkbox');
        }

        function initpnfsValue() {
            var param=$("input[name='pnfs']").val(),checkBoxs = $("input[type='checkbox']"), array = param.split(",");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < checkBoxs.length; j++) {
                    var checkbox = $(checkBoxs[j]);
                    if (checkbox.val() == array[i]) {
                        checkbox.attr('checked','checked');
                        break;
                    }
                }
            }
            form.render('checkbox');
        }

        function initpnzjValue() {
            var param=$("input[name='pnzj']").val(),checkBoxs = $("input[type='checkbox']"), array = param.split(",");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < checkBoxs.length; j++) {
                    var checkbox = $(checkBoxs[j]);
                    if (checkbox.val() == array[i]) {
                        checkbox.attr('checked','checked');
                        break;
                    }
                }
            }
            form.render('checkbox');
        }

        function initenfsValue() {
            var param=$("input[name='enfs']").val(),checkBoxs = $("input[type='checkbox']"), array = param.split(",");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < checkBoxs.length; j++) {
                    var checkbox = $(checkBoxs[j]);
                    if (checkbox.val() == array[i]) {
                        checkbox.attr('checked','checked');
                        break;
                    }
                }
            }
            form.render('checkbox');
        }

        function initenzjValue() {
            var param=$("input[name='enzj']").val(),checkBoxs = $("input[type='checkbox']"), array = param.split(",");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < checkBoxs.length; j++) {
                    var checkbox = $(checkBoxs[j]);
                    if (checkbox.val() == array[i]) {
                        checkbox.attr('checked','checked');
                        break;
                    }
                }
            }
            form.render('checkbox');
        }
        form.on('submit(last)',function(data){
            if(pid == 'null') return  false;
            window.location.href = "{:url('shzl/show')}";
            return  false;
        });
        /* 监听提交 */
        form.on('submit(next)', function(data){
            console.log({'lcjj_info':data.field})
            if(pid == 'null') return  false;
            ajaxData.ajaxData('POST', "{:url('lcjj/update')}?pid=" + pid, {'lcjj_info':data.field},function (back) {
                console.log(data.field);
                if(back.code == 200){
                    layer.msg('保存成功', { icon: 6, time: 1000 }, function () {
                        // 获得frame索引
                        //location.reload();
                    });
                }else{
                    layer.msg(back.msg, {icon: 5});
                }
            });
            // parent.layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });

    });
</script>
</body>
</html>
